<template>
    <div class="kapian">
        <el-card class="box-card">
            <template #header>
            <div class="card-header">
                <span>菜单管理</span>
                <el-button type="primary" @click="xinzengcaidan">新增菜单</el-button>
            </div>
            </template>
                <div class="biuaoge">
                    <el-table :data="menu_list" stripe style="width: 100%"
                    row-key="id"
                    :tree-props="{children: 'children',hasChildren: 'hasChildren'}">
                    
                        <el-table-column prop="title" label="名称" />
                        <el-table-column prop="permission" label="权限编码"  />
                        <el-table-column prop="icon" label="图标" />
                        <el-table-column prop="type" label="类型" />
                        <el-table-column prop="path" label="菜单URL" />
                        <el-table-column prop="component" label="菜单组件" />
                        <el-table-column prop="menu_sort" label="排序号" />
                        <el-table-column prop="hidden" label="状态" />
                        <el-table-column  label="操作">
                            <template #default="scoped">
                                <el-button type="primary" :icon="Edit" circle />
                                <el-button type="danger" :icon="Delete" circle />
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
        </el-card>
    </div>
    <div class="xinzeng">
        <el-dialog
            v-model="kapian"
            title="新增菜单"
            width="40%"
            :before-close="handleClose">
            <template #default>
                <div class="neirong">
                    <div style="height: 1px; width: 100%; background: black;"></div>
                    <div class="danxuan">
                        <el-radio-group v-model="send_params.type" class="ml-4">
                            <el-radio label='0' size="large">目录</el-radio>
                            <el-radio label='1' size="large">菜单</el-radio>
                            <el-radio label='2' size="large">按钮</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="xuanzeqi">
                        <el-tree-select
                            v-model="send_params.pid_id"
                            :data="tree_data"
                            check-strictly
                            :render-after-expand="false"
                            style="width: 240px"/>
                    </div>
                    <div class="shurukuang">
                        <el-input v-model="send_params.title" placeholder="请输入标题" />
                        <el-input v-model="send_params.name" placeholder="请输入名字" />
                        <el-input v-show="send_params.type!='2'" v-model="send_params.icon" placeholder="请输入图标" />
                        <el-input v-show="send_params.type!='2'" v-model="send_params.path" placeholder="请输入地址" />
                        <el-input v-show="send_params.type!='0'" v-model="send_params.permission" placeholder="权限编码" />
                        <el-input v-show="send_params.type=='1'" v-model="send_params.component" placeholder="菜单组件" />
                    </div>
                    <div class="select_zhuangtai">
                        <el-radio-group v-model="send_params.hidden">
                            <el-radio label="0" size="large">正常</el-radio>
                            <el-radio label="1" size="large">禁用</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="xuhao">
                        <el-input-number v-model="send_params.menu_sort" :min="1" :max="1000"/>
                    </div>
                    <div style="height: 1px; width: 100%; background: black;"></div>
                    <div class="anniu">
                        <el-button type="primary" @click="lijichuangjian">立即创建</el-button>
                        <el-button @click="guanbichuangkou">取消</el-button>
                    </div>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="my_menu">
import {ref} from 'vue'
import {all_list_menu, tree_menu, add_menu} from '@/apis/menu'
import { Edit, Delete } from '@element-plus/icons-vue'

const kaiqicaidan = ref(false)
const leixing = ref('0')
// const tree_value = ref()
const tree_data = ref()
const kapian = ref(false)
const select_zhuangtai = ref("1")

const send_params = ref({
    type:'1',
    title:'',
    name:'',
    icon:'',
    path:'',
    permission:'',
    component:'',
    hidden:'',
    menu_sort: 1,
    pid_id:null
})

const xinzengcaidan = () => {
    kapian.value = true
}
const guanbichuangkou = () => {
    kapian.value = false
}
const handleClose = (done) => {
    done()
}

const lijichuangjian = async() => {
    console.log('要发送的数据:::',send_params.value )
    await add_menu(send_params.value)
    get_menu_list()
}

const menu_list = ref()
const get_menu_list = async() => {
    let res = await all_list_menu()
    let tree_res = await tree_menu()
    menu_list.value = res.results
    tree_data.value = tree_res.results
    console.log("all_menu",res.results)
    console.log("tree_menu", tree_res.results)
}
get_menu_list()
</script>

<style lang="scss" scoped>
.kapian{
    .box-card{
        .card-header{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
}
.xinzeng{
    .neirong{
        display: flex;
        flex-direction: column;
        gap: 10px;
        .danxuan{
            display: flex;
            align-items: center;
            justify-content: left;
        }
        .xuanzeqi{
            display: flex;
            align-items: center;
            justify-content: left;
        }
        .shurukuang{
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .select_zhuangtai{
            display: flex;
            align-items: center;
            justify-content: left;
        }
        .xuhao{
            display: flex;
            align-items: center;
            justify-content: left;
        }
        .anniu{
            display: flex;
            align-items: center;
            justify-content: left;
        }
    }
}
</style>